/*
限时活动
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header>
      <el-button type="primary" @click="handleAddUpdate()" v-repeatClick>添加</el-button>
      <el-button @click="handleBeforeUpdate" v-repeatClick>修改</el-button>
      <el-button @click="getGoodsSale" v-repeatClick>刷新</el-button>
      <el-button type="danger" @click="delGoods" v-repeatClick>删除</el-button>
    </my-header>

    <!-- 列表区 -->
    <el-card  style="flex: 1;">
      <div class="app-page">
        <div class="content-flex">
          <div>
            <el-form ref="search" :model="search" inline size="small">
              <el-form-item label="" prop="outOfTime">
                <el-select
                  v-model="search.outOfTime"
                  placeholder="是否过期"
                >
                  <el-option label="是" :value="true"> </el-option>
                  <el-option label="否" :value="false"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="query_batchId">
                <el-button type="primary" round @click="getGoodsSale"
                >搜索</el-button
                >
                <el-button
                  type="warning"
                  round
                  @click="$refs.search.resetFields()"
                >重置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 列表区 -->
        <div style="flex: 1">
          <el-table
            height="100%"
            :data="data"
            border
            stripe
            highlight-current-row
            ref="multipleTable"
            @row-dblclick="handleRowDbclick"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="index" width="55" align="center">
            </el-table-column>
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>

            <el-table-column
              label="创建时间"
              sortable
              prop="createTime"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
        <!-- 分页区 -->
        <div style="margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 200, 500, 1000]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 添加修改身份证信息 -->
    <el-dialog
      v-dialog-drag
      :title="title + '限时特价商品'"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      @close="restForm"
    >
      <div style="position: relative">
        <el-form-item label="开始结束日期" prop="date">
          <el-date-picker
            v-model="baseForm.date"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['12:00:00']">
          </el-date-picker>
        </el-form-item>
        <el-table :data="baseForm.goodsSaleContent" border>
          <el-table-column label="操作" align="center" width="80">
            <template slot-scope="scope">
              <el-button
                type="danger"
                circle
                icon="el-icon-close"
                @click="deleteGoods(scope.$index)"
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column label="SKU编码">
            <template slot-scope="scope">
              <el-select v-model="scope.row.goodsSkuCode" clearable filterable @change="handleGoodsChange(scope.row)">
                <el-option v-for="goods in baseFormOptions.allGoods" :key="goods.skuCode" :value="goods.skuCode">
                  <span style="display: inline-block;width:80px">sku：{{goods.skuCode}}</span>
                  <span  style="display: inline-block;width:200px">商品中文名称：{{goods.goodsName}}</span>
                  <span  style="display: inline-block;width:80px">商品英文名称：{{goods.englishBrand}}</span>
                  <span  style="display: inline-block;width:80px">商品规格{{goods.specification}}</span>
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="商品中文名称" prop="goodsName">
          </el-table-column>
          <el-table-column label="英文品牌" prop="goodsEnglishBrand">
          </el-table-column>
          <el-table-column label="规格型号" prop="specification">
          </el-table-column>
          <el-table-column label="计量单位" width="80">
            <template slot-scope="scope">
              <el-select
                filterable
                style="width: 100%"
                v-model="scope.row.measureUnit"
                placeholder="选择计量单位">
                <el-option
                  v-for="item in measuringUnit"
                  :key="item"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="当下缺货" prop="outOfStoreNum" width="80"></el-table-column>
          <el-table-column label="采购数量" width="120" >
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.purchaseNum"  controls-position="right" style="width: 100%" :min="0"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="采购单价" >
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.purchasePrice"  controls-position="right" :precision="2" :step="0.1" style="width: 100%" :min="0"></el-input-number>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right; margin-top: 10px">
          <el-link type="primary" :underline="false" @click="addGoodsRow">
            <el-button icon="el-icon-plus" type="primary" circle>
            </el-button>
            添加商品行
          </el-link>
        </div>
        <el-row :gutter="20" style="margin-top:30px">
          <el-col :span="24" style="text-align: right">
            <el-form-item>
              <el-button style="margin-left: 10px" @click="restForm">重置</el-button>
              <el-button type="primary" @click="submit">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

  </div>
</template>

<script>

let search = {
  //是否过期
  outOfTime:'',
};
let sale = {
  goodsId:'',
  salePrice:''
}
//身份证基本信息表单
let baseForm = {
  goodsSaleContent:[],
  date:''
};


import myHeader from "@/components/pageHEader/pageHeader";
import { dateFormat } from "@/utils";
import {
  getGoodsSale,
  addGoodsSale,
  delGoods,
  modGoods
} from "@/api/wx/goods";
import {
  getGoods
} from "@/api/wx/goods";
import uploadImage from '../parts/components/uploadImage'
import editor from '../parts/components/editor'
export default {
  name: "goodssale",
  components: {
    myHeader,
    uploadImage,
    editor
  },
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      total: 0,
      data: [],
      //表格选中
      multipleSelection: [],
      //搜索
      search: this.cloneObj(search),
      activeName: "baseForm",
      //对话框
      dialogFormVisible: false,
      title: "添加",
      baseForm: this.cloneObj(baseForm),
      baseRules: {
        'shippingGoods.goodsName': [this.$RegExp.required('请选择包邮商品')],
        'shippingGoods.shippingGoodsTypeTag': [this.$RegExp.required('请选择所属类型')],
        'shippingGoods.shippingGoodsType': [this.$RegExp.required('请选择商品类型')],
        'shippingGoods.introduction': [this.$RegExp.required()],
      },
      detailRules: {

      },
      baseFormOptions:{
        goodsList:[],
      },
      //标签
      inputVisible: false,
      inputValue: ''
    };
  },
  created() {
    let query = {
      pageNum: 1,
      pageSize: 500,
    }
    getGoods(query).then(resp=>{
      this.baseFormOptions.goodsList = resp.data.records
    })
  },
  mounted() {
    this.getGoodsSale();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getGoodsSale()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getGoodsSale()
    },
    //重置表单信息
    restForm() {
      this.$nextTick(() => {
        if (this.$refs.baseForm) this.$refs.baseForm.resetFields();
      });
    },
    handleBeforeUpdate(){
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.tip("只能勾选表格中的一条数据");
        return;
      }
      this.handleAddUpdate(this.multipleSelection[0])
    },
    handleAddUpdate(row) {
      this.activeName = "baseForm";
      //修改处理
      if (row) {
        //将数据复制给form
        this.handleModform(row, this.baseForm);
        this.dialogFormVisible = true;
        this.title = "修改";
      } else {
        this.baseForm = this.cloneObj(baseForm);
        this.title = "添加";
        this.dialogFormVisible = true;
        this.$nextTick(()=>{
          this.$refs.editor.setContent('')
        })
      }
    },
    getGoodsSale() {
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        shippingGoodsTypeTag: this.search.shippingGoodsTypeTag,
        shippingGoodsType: this.search.shippingGoodsType
      };
      getGoodsSale(query).then((resp) => {
        this.data =  resp.data.records
        this.total = resp.data.total;
      });
    },
    //包邮商品改变时
    hanldeGoodsChange(val){
      if(val){
        let row = this.baseFormOptions.goodsList.filter(item=>item.id === val)[0]
        this.handleModform(row, this.baseForm.mailGoods);
        this.baseForm.shippingGoods.goodsId = val
        this.baseForm.shippingGoods.publicityPictures = row.goodsImages
        this.baseForm.additionalInfo.forEach(item=>{
          item.goodsId = val
        })
      }else{
        this.handleModform(baseForm.mailGoods, this.baseForm.mailGoods);
      }
    },
    //标签信息
    handleClose(tag) {
      this.baseForm.shippingGoods.shippingGoodsTags.splice(this.baseForm.shippingGoods.shippingGoodsTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.baseForm.shippingGoods.shippingGoodsTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },

    //表格双击修改
    handleRowDbclick(row) {
      this.handleAddUpdate(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    submit() {
      this.$refs["baseForm"].validate((valid) => {
        if (valid) {
          let submit = this.cloneObj(this.baseForm)
          let request;
          submit.shippingGoods.notice = [submit.shippingGoods.notice]
          submit.additionalInfo.filter(item=>item.additionalName === 'specification')[0].additionalContent = this.$refs.editor.getContent()
          if (this.title == "添加") {
            request = addGoodsSale(submit);
          } else {
            request = modGoods(submit);
          }
          request.then((resp) => {
            this.$message.success(resp.message || "成功");
            this.dialogFormVisible = false;
            this.getGoodsSale();
          });
        } else {
          this.activeName = "baseForm";
        }
      });
    },

    addGoods() {
      this.goodssa.orderGoods.push(this.cloneObj(sale));
    },
    deleteGoods(index) {
      if(this.baseForm.orderGoods.length>1){
        this.confirm().then(() => {
          this.baseForm.orderGoods.splice(index, 1);
        });
      }else{
        this.$message.error('删除失败，预购商品至少有一条内容！')
      }
    },
    //查看身份证信息
    view() {
      this.handleBeforeUpdate();
      this.title = '查看';
    },
    //删除身份证信息
    delGoods() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.confirm().then(() => {
        delGoods(this.multipleSelection.map((item) => item.id)).then(
          (resp) => {
            this.$message.success(resp.message || "成功");
            this.getGoodsSale();
          }
        );
      });
    },

  },
};
</script>

<style scoped lang='scss'>
.self-textarea{
  /deep/ .el-form-item__content{
    margin-left:0px !important;
  }
}
.display-img{
  position:relative;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  div{
    background: rgba(0,0,0,.3);
    height: 30px;
    display: none;
  }
  i{
    font-size: 16px;
    position:absolute;
    top: 5px;
    right: 5px;
  }
  &:hover div {
    display: block;
    z-index: 10000;
  }
}

/deep/ .el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 150px;
  margin-left: 10px;
  vertical-align: bottom;
}
.margin-left-unset{
  margin-left:0px
}
</style>
